<template>
  <div>
    <van-nav-bar
      title="申请助教"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div class="maincard">
      <div class="typecard">
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">申请类型</div>
        </div>
        <div style="display: flex">
          <div
            :class="zhujiaodata.apply_type === '1' ? 'typebtn1' : 'typebtn2'"
            @click="setType('1')"
          >
            全职
          </div>
          <div
            :class="zhujiaodata.apply_type === '2' ? 'typebtn1' : 'typebtn2'"
            @click="setType('2')"
          >
            兼职
          </div>
        </div>
      </div>
      <div class="infocard">
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">基本信息</div>
        </div>
        <van-form style="width: 100%">
          <van-field
            v-model="zhujiaodata.name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
            class="fieldlabel"
          />
          <van-field
            v-model="zhujiaodata.age"
            name="年龄"
            label="年龄"
            type="number"
            placeholder="年龄"
            :rules="[{ required: true, message: '请填写年龄' }]"
            class="fieldlabel"
          />
          <van-field
            v-model="zhujiaodata.phone"
            name="联系电话"
            label="联系电话"
            placeholder="联系电话"
            class="fieldlabel"
            :rules="[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]"
          />
          <van-field
            v-model="zhujiaodata.wechat"
            name="微信号"
            label="微信号"
            placeholder="微信号"
            :rules="[{ required: true, message: '请填写微信号' }]"
            class="fieldlabel"
          />

          <van-field
            v-model="zhujiaodata.city"
            is-link
            readonly
            name="area"
            label="地区选择"
            placeholder="点击选择省市区"
            @click="showArea = true"
            class="fieldlabel"
          />
          <van-popup v-model:show="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onAreaConfirm"
              @cancel="showArea = false"
            />
          </van-popup>

          <van-field
            name="select"
            v-if="zhujiaodata.apply_type == 1"
            label="期望入驻场馆"
            class="fieldlabel"
          >
            <template #input>
              <el-select
                v-model="zhujiaodata.clubvalue"
                placeholder="选择期望入驻场馆"
                @change="clubchange"
                @visible-change="hasdata"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </van-field>

          <van-field
            name="select"
            v-if="zhujiaodata.apply_type == 2"
            label="期望入驻场馆"
            class="fieldlabel"
          >
            <template #input>
              <el-select
                v-model="zhujiaodata.clubvalues"
                multiple
                placeholder="选择期望入驻场馆"
                @visible-change="hasdata"
                @change="clubchange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </van-field>
        </van-form>
      </div>
      <div class="othercard">
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">个人信息</div>
        </div>
        <van-field
          v-model="zhujiaodata.introduction"
          name="简介"
          label="简介"
          autosize
          placeholder="简介"
          type="textarea"
          class="fieldlabel"
        />
        <van-field
          name="uploader"
          label="上传图片（图片只能上传一张）"
          class="fieldlabel"
        >
          <template #input>
            <van-uploader v-model="zhujiaodata.image" :after-read="afterRead" />
          </template>
        </van-field>
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getstoreinfobycity, zhujiaoapply } from "@/http/request.js";
import { areaList } from "@vant/area-data";
import { showToast } from "vant";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      clubshow: false,
      showArea: false,
      areaList,
      options: [],
      zhujiaodata: {
        apply_type: "1",
        user_id: "",
        store_id: [],
        expect_storename_list: [],
        name: "",
        age: "",
        phone: "",
        wechat: "",
        introduction: "",
        image: [],
        clubvalue: "",
        clubvalues: [],
        city: "",
      },
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      this.zhujiaodata.user_id = userinfo.id.toString();
    },
    onSubmit() {
      if (this.zhujiaodata.store_id == "") {
        showToast("请选择期望入驻场馆");
      } else {
        const formdata = new FormData();
        for (const key in this.zhujiaodata) {
          if (this.zhujiaodata.hasOwnProperty(key)) {
            if (key == "image" && this.zhujiaodata[key].length > 0) {
              formdata.append(key, this.zhujiaodata[key][0].file);
            } else {
              formdata.append(key, this.zhujiaodata[key]);
            }
          }
        }
        zhujiaoapply(formdata).then((res) => {
          showToast(res.msg);
        });
      }
    },
    setType(value) {
      this.zhujiaodata.clubvalue = "";
      this.zhujiaodata.clubvalues = [];
      this.zhujiaodata.apply_type = value;
    },
    onAreaConfirm(value) {
      const store = useStore();
      var timestamp = store.getStoreTimestamp;
      if (timestamp == undefined) {
        timestamp = "";
      }
      this.options = [];
      this.zhujiaodata.city = value.selectedOptions
        .map((item) => item.text)
        .join("/");
      let segments = this.zhujiaodata.city.split("/");
      if (segments.length > 2) {
        segments = segments.slice(0, 2);
      }
      this.zhujiaodata.city = segments.join("/");
      getstoreinfobycity({
        city: this.zhujiaodata.city,
        timestamp: timestamp,
      }).then((res) => {
        if (res.code == 0) {
          for (var i = 0; i < res.data.stores_aa.length; i++) {
            this.options.push({
              label: res.data.stores_aa[i].store_name,
              value: res.data.stores_aa[i].store_id,
            });
          }
        } else {
          showToast(res.msg);
        }
      });
      this.showArea = false;
    },
    clubchange(value) {
      this.zhujiaodata.store_id = [];
      this.zhujiaodata.expect_storename_list = [];
      if (this.zhujiaodata.apply_type == 1) {
        this.zhujiaodata.store_id.push(value);
        for (let i = 0; i < this.options.length; i++) {
          if (this.options[i].value === value) {
            this.zhujiaodata.expect_storename_list.push(this.options[i].label);
            break;
          }
        }
      } else {
        this.zhujiaodata.store_id = value;
        for (let i = 0; i < value.length; i++) {
          let currentStoreId = value[i];
          for (let j = 0; j < this.options.length; j++) {
            if (this.options[j].value === currentStoreId) {
              this.zhujiaodata.expect_storename_list.push(
                this.options[j].label
              );
            }
          }
        }
      }
      this.zhujiaodata.expect_storename_list = JSON.stringify(
        this.zhujiaodata.expect_storename_list
      );
      this.zhujiaodata.store_id = JSON.stringify(this.zhujiaodata.store_id);
    },
    hasdata(value) {
      if (this.options.length == 0 && value) {
        showToast("未选择城市或此城市暂无场馆");
      }
    },

    afterRead(file) {
      this.zhujiaodata.image = [];
      this.zhujiaodata.image.push(file);
    },
    backlink() {
      this.$router.back();
    },
  },
  mounted() {
    this.inituserinfo();
  },
};
</script>

<style scoped>
.backbox {
  width: 100%;
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconsvg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
}
.backbox .title {
  font-size: 20px;
}
.maincard {
  width: 100%;
  background-color: #f2f3f5;
  display: flex;
  flex-direction: column;
}
.typecard {
  width: 85%;
  padding: 15px;
  margin: 20px auto 0 auto;
  background-color: white;
  border-radius: 15px;
}
.infocard {
  width: 85%;
  padding: 15px;
  margin: 20px auto 0 auto;
  background-color: white;
  border-radius: 15px;
}
.othercard {
  width: 85%;
  padding: 15px;
  margin: 20px auto 0 auto;
  background-color: white;
  border-radius: 15px;
}
.boxtitle {
  display: flex;
  align-items: center;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 4px;
  font-weight: 550;
}

.typebtn1 {
  width: 110px;
  height: 35px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 2px solid #678bfc;
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  color: #3b69ff;
  margin-left: 10px;
  margin-top: 10px;
}
.typebtn2 {
  width: 110px;
  height: 35px;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: rgba(125, 154, 249, 0.226);
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  margin-top: 10px;
  margin-left: 10px;
  color: #3b69ff;
}
</style>

<style>
.fieldlabel .van-field__label {
  font-weight: 550 !important;
}
</style>